<template>
	<view>
		 <scroll-view  scroll-x class="list_box" enable-flex>
		 	<view v-for="item in listData" :key="item.id" :class="(item.id == listActive?'active':'')" style="width: 35%;" class="list_child" @tap="changeActive" :mark:id="item.id">{{item.name}}</view>
		 </scroll-view>
		<view class="">
			<uni-table border stripe emptyText="暂无更多数据" >
			    <!-- 表头行 -->
			    <uni-tr>
			        <uni-th align="center">基金名称</uni-th>
			        <uni-th align="center">单位净值</uni-th>
			        <uni-th align="left">一周收益</uni-th>
					<uni-th align="left">一月收益</uni-th>
					<uni-th align="left">三月收益</uni-th>
					<uni-th align="left">半年收益</uni-th>
					<uni-th align="left">一年收益</uni-th>
			    </uni-tr>
			    <!-- 表格数据行 -->
			    <uni-tr v-for="n in 20" :key="n">
			        <uni-td>{{fundsData.name}}</uni-td>
			        <uni-td>{{fundsData.iopv}}</uni-td>
			        <uni-td class="redtext">{{fundsData.week}}</uni-td>
					<uni-td>{{fundsData.month}}</uni-td>
					<uni-td>{{fundsData.three_month}}</uni-td>
					<uni-td>{{fundsData.half_year}}</uni-td>
					<uni-td>{{fundsData.year}}</uni-td>
			    </uni-tr>
			
			</uni-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[
					{id:1,name:"全部"},
					{id:2,name:"股票型"},
					{id:3,name:"混合型"},
					{id:5,name:"债券型"},
					{id:4,name:"QDII型"}
				],
				listActive:1,
				fundsData:{
					id:1,
					name:"广发银行高息金股",
					iopv:"1.005",
					week:"+5.55%",
					month:"+6.68%",
					three_month:"+5.86%",
					half_year:"+6.85%",
					year:"+8.88%"
				}
			}
		},
		methods: {
			changeActive(event){
				this.listActive=event.mark.id
			},
		},
	}
</script>

<style lang="scss">
	page{
		box-sizing: border-box;
	}
.list_box{
	white-space: nowrap;
	width: 100%;
	display: flex;
	overflow: hidden;
	height: 90rpx;
	line-height: 90rpx;
	box-shadow: 0rpx 20rpx 0rpx 10rpx #efefef;
	padding: 10rpx;
	margin-bottom: 10rpx;
	.list_child{
		font-size: 28rpx;
		width: 200rpx;
		display: inline-block;
		margin-right: 15%;
		color: #999999;
		height: 70%;
	}
	.active{
		color: #3476f1;
		border-bottom: 2px solid #3476f1;
	}
}
	.redtext{
		color: #f85656;
	}
</style>
